<!--
 * @Author: 秦少卫
 * @Date: 2022-04-21 20:20:20
 * @LastEditors: 秦少卫
 * @LastEditTime: 2023-08-05 18:44:54
 * @Description: 缩放元素
-->
<template>
  <div class="box">
    <bigIcon @click="big" width="20" height="20" style="color: #999"></bigIcon>
    <div style="width: 6px"></div>
    <smallIcon @click="small" width="20" height="20"></smallIcon>
    <Divider type="vertical" />
    <Icon type="md-expand" @click="rSet" size="20" color="#999" />
    <div style="width: 6px"></div>
    <Icon type="md-contract" @click="setViewport" size="20" color="#999" />
  </div>
</template>

<script setup name="Zoom">
import useSelect from '@/hooks/select';
import bigIcon from '@/assets/icon/zoom/big.svg';
import smallIcon from '@/assets/icon/zoom/small.svg';

const { canvasEditor } = useSelect();

const rSet = () => {
  canvasEditor.one();
};
const big = () => {
  canvasEditor.big();
};
const small = () => {
  canvasEditor.small();
};
const setViewport = () => {
  canvasEditor.auto();
};
</script>
<style scoped lang="less">
.box {
  /* position: absolute;
  right: 10px;
  bottom: 10px; */
  display: flex;
  align-items: center;
  padding: 0 6px;

  :deep(.ivu-btn:hover) {
    svg {
      fill: #57a3f3;
    }
  }
}
</style>
